<template>
  <el-row :gutter="20">
    <template v-for="item in formItem" :key="item.prop">
      <el-col :span="item.col || customOption?.col" class="col">
        <div class="input-box a" :class="{ border: itemKey === item.key }" @click="onClickComp(item.key)">
          <h2 class="label">{{ item.label }}</h2>
          <div class="input-wrap">
            <slot v-if="item.type === 'slot'" :name="item.slotName"></slot>
            <component
              v-else
              v-model:value="item.value"
              :is="modules[`com-${item.type}`]"
              :column="item"
            />
          </div>
          <ul class="flex-yc">
            <li v-if="item.handlerType === 'uploadFile' || item.handlerType === 'uploadImg'" class="file-box">
              <!-- required -->
              <input type="file" class="file-btn" multiple="false" @change="onUploadSingle" />
              <i class="iconfont icon-fileupload"></i>
            </li>
            <li v-if="item.handlerType === 'uploadFiles'" class="file-box">
              <input type="file" class="file-btn" webkitdirectory directory multiple @change="onUploadMultiple" />
              <i class="iconfont icon-cloudupload"></i>
            </li>
            <li><i class="iconfont icon-filedownload"></i></li>
            <li><i class="iconfont icon-shezhi"></i></li>
            <li><i class="iconfont icon-menu"></i></li>
          </ul>
        </div>
      </el-col>
    </template>
  </el-row>
</template>

<script setup lang="ts">
import { useTableAttr } from '@/composables/table'
import { CustomFormItem, CustomOption } from '../types'
import { ref } from 'vue'
// 自动化的规则，通type属性，自动读到目录组件
const { modules } = useTableAttr()

withDefaults(
  defineProps<{
    customOption?: CustomOption
    formItem: CustomFormItem[]
  }>(),
  {
    customOption: {
      size: '',
      col: 24,
    },
  },
)

const itemKey = ref('')
const $emit = defineEmits<{
  (e: 'onClickFormItem', v: string),
  (e: 'onClickUploadSingle', v: any, event: any),
  (e: 'onClickUploadMultiple', v: any, event: any)
}>()
const onClickComp = (val: string) => {
  itemKey.value = val
  $emit('onClickFormItem', val)
}

// 单文件上传
const onUploadSingle = async (event: any) => {
  const files = event.target.files
  $emit('onClickUploadSingle', itemKey.value, files)
  event.target.value = ''
}

// 文件夹上传
const onUploadMultiple = async (event: any) => {
  const files = event.target.files
  $emit('onClickUploadMultiple', itemKey.value, files)
  event.target.value = ''
}
</script>

<style scoped lang="scss">
.col {
  margin-bottom: 32px;
}

.input-box {
  width: 100%;
  height: 274px;
  overflow: hidden;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 2px 10px 0 #7e899c23;

  &.border {
    //border: 1px solid $primary;
    box-shadow: 0 2px 10px 0 #c3d9efff;
  }

  h2.label {
    padding: 12px 0;
    font-size: 16px;
    color: #4e5969;
    text-align: center;
  }

  .input-wrap {
    width: calc(100% - 40px);
    height: 176px;
    padding: 20px;
    margin: 0 20px;
    border: 1px solid #ededed;
  }

  ul {
    justify-content: center;
    padding: 22px 0 14px;

    li {
      margin: 0 20px;
      cursor: pointer;

      i {
        font-size: 20px;
        color: #8691a3;
      }
    }
  }
}

.file-box {
  display: inline-block;
  position: relative;
  overflow: hidden;
  color: rgb(252, 113, 0);
  background-color: rgb(255, 255, 255);
}

.file-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  outline: none;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
</style>
